<template>
  <div style="width: 600px; height: 600px" ref="myDiv" id="myDiv"></div>
</template>

<script>
import * as echarts from "../../assets/echarts.min.js";
import axios from "axios";
import { reactive, ref, onMounted } from "vue";

export default {
  name: "HelloWorld",
  setup() {
    const myDiv = ref();

    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit(); // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      // // 请求后端接口
      // axios({
      //   method:'get',
      //   url:'/api/data/list'
      // }).then(res=>{
      //   console.log(res.data.data);
      //    // 图表的初始化，放在数据获取成功后
      //    init();
      // })

      var bool = false;
      var zhi = 0;
      var zhi2 = 0;
      var dataAll = [];
      var names = [];
      var start = [];
      var stop = [];
      var down = [];
      var statues = [];

      // 请求后端接口
      axios.get("/api/data/list").then((res) => {
        console.log(res.data.data.data);

        var data = res.data.data.data;
        for (let i in data) {
          // console.log(i)
          for (let j in dataAll) {
            // console.log(j)
            if (data[i].name == dataAll[j].name) {
              bool = true;
              zhi = j;
              break;
            } else {
              bool = false;
            }
          }
          var time =
            (new Date(data[i].endtime).getTime() -
              new Date(data[i].starttime).getTime()) /
            1000;
          if (bool) {
            bool = false;
            for (let j in dataAll[zhi].status) {
              if (data[i].status == dataAll[zhi].status[j]) {
                bool = true;
                zhi2 = j;
                break;
              } else {
                bool = false;
              }
            }
            if (bool) {
              dataAll[zhi].time[zhi2] += time;
            } else {
              dataAll[zhi].status.push(data[i].status);
              dataAll[zhi].time.push(time);
            }
          } else {
            dataAll.push({
              name: data[i].name,
              status: [data[i].status],
              time: [time],
            });
          }
        }

        console.log(dataAll);

        for (let i in dataAll) {
          names.push(dataAll[i].name);
          if (dataAll[i].status.indexOf("运行") != -1) {
            start.push(dataAll[i].time[dataAll[i].status.indexOf("运行")]);
          } else {
            start.push(0);
          }
          if (dataAll[i].status.indexOf("待机") != -1) {
            stop.push(dataAll[i].time[dataAll[i].status.indexOf("待机")]);
          } else {
            stop.push(0);
          }
          if (dataAll[i].status.indexOf("离线") != -1) {
            down.push(dataAll[i].time[dataAll[i].status.indexOf("离线")]);
          } else {
            down.push(0);
          }
        }

        console.log(names, start, stop, down);

        // 图表的初始化，放在数据获取成功后
        init(names, start, stop, down);
      });
    };

    // 初始化图表
    const init = (names, start, stop, down) => {
      var options = {
        tooltip: {},
        title: {
          text: "柱状图展示接口所有数据中各设备各个状态持续时长（秒）",
        },
        xAxis: {
          data: names,
          name: "设备",
        },
        yAxis: {
          name: "持续时长(秒)",
        },
        series: [
          {
            data: start,
            type: "bar",
            name: "运行",
          },
          {
            data: stop,
            type: "bar",
            name: "待机",
          },
          {
            data: down,
            type: "bar",
            name: "离线",
          },
        ],
      };

      let myChart = echarts.init(document.getElementById("myDiv"));
      // var myChart = echarts.init(myDiv.value)
      myChart.setOption(options);
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
